<template>
    <div class="chart-container">
      <canvas ref="chartCanvas"></canvas>
    </div>
  </template>
  
  <script>
  import QuickChart from 'quickchart-js'
  
  export default {
    props: {
      config: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chartInstance: null
      }
    },
    mounted() {
      this.renderChart()
    },
    beforeDestroy() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
      }
    },
    methods: {
      renderChart() {
        this.chartInstance = new QuickChart(this.$refs.chartCanvas, {
          type: this.config.chartType,
          data: {
            labels: this.config.labels,
            datasets: this.config.datasets.map(ds => ({
              ...ds,
              borderWidth: 2,
              animation: {
                duration: 2000,
                easing: 'easeOutQuart'
              }
            }))
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        })
        this.chartInstance.render()
      }
    }
  }
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 400px;
  }
  </style>